<script setup>
import { ref, onMounted } from 'vue'
import { useTypeStore, useArticleStore } from '@/stores/index.js'
import { useDelArticleService } from '@/api/request.js'
import PageContainer from '@/components/PageContainer.vue'
import { Delete, Edit } from '@element-plus/icons-vue'
// ElConfigProvider 组件
import { ElConfigProvider, ElMessage, ElMessageBox } from 'element-plus'
import MyDrawer from '@/components/MyDrawer.vue'
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 更改分页文字
zhCn.el.pagination.total = '共 {total} 条'
zhCn.el.pagination.goto = '跳至'
zhCn.el.pagination.pagesize = '条/页'
zhCn.el.pagination.pageClassifier = '页'

// 分类仓库
const typeStore = useTypeStore()

// 文章仓库
const articleStore = useArticleStore()

// 表格加载标记
const isLoading = ref(false)

onMounted(async () => {
  await typeStore.getTypeList()
  await handleQuery()
})
// 分类store

// 分页vo对象
const queryObj = ref({
  pagenum: 1, // 默认页码
  pagesize: 5, // 默认页大小
  cate_id: '',
  state: ''
})

// --------处理分页----------
// 页大小变化时的回调
const handleQuery = async () => {
  // console.log(queryObj.value.pagesize)
  isLoading.value = true
  await articleStore.getArticleList(queryObj.value)
  isLoading.value = false
}

// 搜索回调
const onSearch = async () => {
  await handleQuery()
  // resetQueryData()
}

// 重置分页vo对象数据
const resetQueryData = async () => {
  queryObj.value = {
    pagenum: 1, // 默认页码
    pagesize: 5, // 默认页大小
    cate_id: '',
    state: ''
  }
  await handleQuery()
}

// 增加 | 修改文章 抽屉实例
const drawer = ref()

// 增加文章的回调
const addArticle = () => {
  console.log('add')
  drawer.value.open({})
}

// 修改文章的回调
const onEditArticle = (row) => {
  drawer.value.open(row)
}

// 删除文章的回调
const onDelArticle = async (row) => {
  ElMessageBox.confirm('您确定要删除该文章吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await useDelArticleService(row.id)
    await articleStore.getArticleList(queryObj.value)
    ElMessage.success('删除成功')
  })
}

// 抽屉组件 增加 | 修改 成功 回调
const onSuccess = async () => {
  await articleStore.getArticleList(queryObj.value)
}
</script>

<template>
  <div class="article-manager">
    <PageContainer title="文章管理">
      <template #extra>
        <el-button type="primary" plain @click="addArticle">添加文章</el-button>
      </template>
      <template #main>
        <div class="header">
          <span>文章分类：</span>
          <el-select
            v-model="queryObj.cate_id"
            placeholder="请选择"
            style="width: 240px"
            class="select"
          >
            <el-option
              v-for="item in typeStore.typeList"
              :key="item.id"
              :label="item.cate_name"
              :value="item.id"
            />
          </el-select>
          <span>发布状态：</span>
          <el-select
            v-model="queryObj.state"
            placeholder="请选择"
            style="width: 240px"
            class="select"
          >
            <el-option label="已发布" value="已发布" />
            <el-option label="草稿" value="草稿" />
          </el-select>
          <el-button type="success" @click="onSearch">搜索</el-button>
          <el-button type="primary" @click="resetQueryData">重置</el-button>
        </div>
        <div class="main">
          <el-table v-loading="isLoading" :data="articleStore.articleData.data">
            <el-table-column label="文章标题" prop="title"></el-table-column>
            <el-table-column label="分类" prop="cate_name"></el-table-column>
            <el-table-column label="发布时间" prop="pub_date"></el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button
                  :icon="Edit"
                  circle
                  plain
                  type="primary"
                  @click="onEditArticle(row)"
                ></el-button>
                <el-button
                  :icon="Delete"
                  circle
                  plain
                  type="danger"
                  @click="onDelArticle(row)"
                ></el-button>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty description="没有数据" />
            </template>
          </el-table>
        </div>
      </template>
      <template #footer>
        <div class="footer">
          <el-config-provider :locale="zhCn">
            <el-pagination
              background
              layout="jumper, total,prev, pager, next,sizes"
              :page-sizes="[2, 3, 5, 10]"
              :total="articleStore.articleData.total"
              v-model:current-page="queryObj.pagenum"
              v-model:page-size="queryObj.pagesize"
              @size-change="handleQuery"
              @current-change="handleQuery"
            />
          </el-config-provider>
        </div>
      </template>
    </PageContainer>
    <MyDrawer ref="drawer" @success="onSuccess"></MyDrawer>
  </div>
</template>

<style scoped lang="less">
.article-manager {
  .header {
    display: flex;
    //justify-content: space-between;
    align-items: center;
    margin: 30px 0;
    .select {
      margin-right: 20px;
      //margin-bottom: 20px;
    }
  }
  .footer {
    display: flex;
    justify-content: end;
    margin-top: 30px;
  }
}
</style>
